<template>
  <!-- 弹框 -->
  <el-dialog
    ref="authDialog"
    :before-close="close"
    :visible.sync="visible"
    :close-on-click-modal="false"
    title="分配权限"
    top="5vh"
    width="75%">
    <el-row style="display:flex;flex-direction: column">
      <el-row style="height: 495px">
        <br>
        <!--        <div class="menu-header">菜单权限</div>-->
        <el-scrollbar style="height: 450px;border: 1px solid rgba(144,147,153,.5);">
          <el-col style="padding: 5px 3px;">
            <el-tree
              v-loading="loading"
              ref="tree"
              :data="jsonTree"
              default-expand-all
              style="margin-top: 12px;"
              show-checkbox
              node-key="id"
              highlight-current
              @node-click="nodeClickHandle" />
          </el-col>
        </el-scrollbar>
      </el-row>
      <el-row style="text-align: center;margin-bottom: 15px;">
        <el-button type="primary" @click="reqAuth" >确 定</el-button>
        <el-button @click="close()">取 消</el-button>
      </el-row>
    </el-row>
  </el-dialog>
</template>

<script>
import { getJsonTree } from '@/utils/index'
import {
  getAppMenu, setAppRoleAuth
} from '@/api/admin/auth/gms/roleManage'
export default {
  name: 'Gmsrolemmanage',
  components: {},
  props: {
    id: '',
    visible: false,
    dataType: Number,
    menuCategory: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      tree: []
    }
  },
  computed: {
    jsonTree() {
      this.tree.forEach(el => (el.label = el.text))
      this.tree.forEach(el => (el.parentId = el.parent))
      return getJsonTree(this.tree)
    }
  },
  mounted() {
    this.searchTree()
  },
  methods: {
    // 加载树
    searchTree() {
      this.loading = true
      getAppMenu({ roleId: this.id, dataType: this.dataType, menuCategory: this.menuCategory })
        .then(res => {
          this.loading = false
          this.deleteRes(res.treejson)
          this.tree = res.treejson
          console.log(res.treejson)
          const selectedRole = res.selectedRole
          debugger
          this.$nextTick(() => {
            if (selectedRole && selectedRole.length) {
              this.$refs['tree'].setCheckedKeys(selectedRole)
            }
          })
        })
        .catch(err => {
          this.loading = false
        })
    },
    // 删除无效数据(无父节点)
    deleteRes(res) {
      const result = []
      for (let i = 0; i < res.length && res[i].id != null; i++) {
        const pid = res[i].parent
        const oid = res[i].id
        result[oid] = pid
      }
      for (let j = 0; j < res.length; j++) {
        // 一级父节点跳过
        if (res[j].parent === '#') continue
        if (res[j] && result[res[j].parent] === null) {
          const index = j
          j = 0
          delete result[res[index].id]
          res.splice(index, 1)
        }
      }
    },
    // 树点击
    nodeClickHandle(data) {
      const {
        text
      } = data
      this.text = text
    },
    getSelectTreeNode() {
      const selectedHalfNode = this.$refs['tree'].getCheckedKeys() // 父节点
      const selectedNode = this.$refs['tree'].getHalfCheckedKeys() // 子节点
      const allNode = selectedHalfNode.concat(selectedNode)
      // 去掉一级菜单
      for (let k = 0; k < allNode.length; k++) {
        const nodekv = allNode[k]
        if (nodekv.length === 2) {
          allNode.splice(k, 1)
        }
      }
      return allNode
    },
    reqAuth() {
      const allNode = this.getSelectTreeNode()
      if (allNode === '' || allNode.length === 0) {
        this.$message({
          type: 'info',
          message: '请至少分配一条权限!'
        })
      } else {
        const params = {
          nowRole: this.id,
          appNowTree: allNode.join(',')
        }
        setAppRoleAuth(this.roleId, params)
          .then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.close()
          })
          .catch(err => {
          })
      }
    },
    close() {
      this.$emit('update:visible', false)
    }
  }

}

</script>

<style scoped>
</style>
